/*
*   @Author: 1296
*   @Date: 2025-05-05
*   @Description: 待办签到
*/
<template>
  <div class="todo-record-container">
    <div class="record-list" v-if="todoRecords.length > 0">
      <h2>待办签到</h2>
      <el-table :data="todoRecords" style="width: 100%; font-size: 12px" @row-click="handleRowClick">
        <el-table-column prop="title" label="活动名称"></el-table-column>
        <el-table-column prop="type" label="签到类型">
          <template #default="scope">
            {{ transformType(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="lastTime" label="持续时间"></el-table-column>
        <el-table-column prop="startTime" label="开始时间"></el-table-column>
        <el-table-column prop="endTime" label="结束时间"></el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            {{ transformStatus(scope.row.status) }}
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="totalRecords"
          layout="prev, pager, next"
          @current-change="handlePageChange"
      ></el-pagination>
    </div>

    <div class="empty-state" v-else>
      <div class="icon">
        <el-icon><FolderOpened /></el-icon>
      </div>
      <p>暂无待办签到</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import {defineComponent, ref, onMounted, onUnmounted} from 'vue';
import { FolderOpened } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import store from "@/store";

const api = axios.create({
  baseURL: store.getters.getBaseURL
});
const pollInterval = ref(null); // 用于存储轮询的定时器
const pollingIntervalTime = 3000; // 轮询时间间隔
// 添加请求和响应拦截器
api.interceptors.request.use(config => {
  const token = sessionStorage.getItem('userToken');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

api.interceptors.response.use(
    response => response,
    error => {
      if (error.response?.status === 401) {
        window.location.href = '/loginAndRegister';
      }
      return Promise.reject(error);
    }
);

export default defineComponent({
  name: 'TodoRecord',
  components: { FolderOpened },
  setup() {
    const todoRecords = ref([]);
    const currentPage = ref(1);
    const pageSize = ref(8);
    const totalRecords = ref(0);
    const loading = ref(false);
    const router = useRouter();

    const fetchTodoRecords = async () => {
      loading.value = true;
      try {
        const response = await api.get(`/record/getTodoRecord?pageNo=${currentPage.value}&pageSize=${pageSize.value}`);
        if (response.data.status === 'success') {
          todoRecords.value = response.data.data.list;
          totalRecords.value = response.data.data.resultCount;
        } else {
          ElMessage.error(response.data.info || '获取待办签到失败');
        }
      } catch (error) {
        console.error('Error fetching todo records:', error);
        ElMessage.error('获取待办签到失败');
      } finally {
        loading.value = false;
      }
    };

    const handlePageChange = (page) => {
      currentPage.value = page;
      fetchTodoRecords();
    };

    const handleRowClick = (row) => {
      const jobCode = sessionStorage.getItem('jobCode');
      let path = '';
      if (row.type === '0') { // 普通签到
        path = `/${jobCode}/commonCheckIn/${row.aid}`;
      } else if (row.type === '1') { // 手势签到
        path = `/${jobCode}/gestureCheckIn/${row.aid}`;
      } else if (row.type === '2') { // 位置签到
        path = `/${jobCode}/locationCheckIn/${row.aid}`;
      } else if (row.type === '3') { // 二维码签到
        path = `/${jobCode}/qrcodeCheckIn/${row.aid}`;
      } else if (row.type === '4') { // 签到码签到
        path = `/${jobCode}/codeCheckIn/${row.aid}`;
      } else {
        ElMessage.error('未知签到类型，无法跳转');
        return;
      }
      router.push({
        path: path,
        query: {
          isVerify: row.isVerify,
          rid: row.id
        }
      });
    };

    const transformStatus = (status) => {
      switch (status) {
        case '0':
          return '已签到';
        case '1':
          return '缺勤';
        case '2':
          return '事假';
        case '3':
          return '病假';
        case '4':
          return '公假';
        case '5':
          return '迟到';
        case '6':
          return '早退';
        case '7':
          return '待签到';
        default:
          return '未知状态';
      }
    };

    const transformType = (type) => {
      switch (type) {
        case '0':
          return '普通签到';
        case '1':
          return '手势签到';
        case '2':
          return '位置签到';
        case '3':
          return '二维码签到';
        case '4':
          return '签到码签到';
        default:
          return '未知类型';
      }
    };

    // 页面加载时获取待办签到记录
    onMounted(() => {
      fetchTodoRecords();
      pollInterval.value = setInterval(fetchTodoRecords, pollingIntervalTime);
    });

    onUnmounted(() => {
      if (pollInterval.value) {
        clearInterval(pollInterval.value);
      }
    });

    return {
      todoRecords,
      currentPage,
      pageSize,
      totalRecords,
      loading,
      handlePageChange,
      handleRowClick,
      transformStatus,
      transformType
    };
  }
});
</script>

<style scoped>
.todo-record-container {
  padding: 20px;
}

.record-list {
  margin-top: 20px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #909399;
}

.icon {
  font-size: 60px;
  margin-bottom: 15px;
}

h2 {
  margin-bottom: 15px;
  color: #333;
}

.el-pagination {
  margin-top: 15px;
  text-align: center;
}
</style>